<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="账户设置" left-arrow fixed @click-left="onClickLeft" />
    <div class="empty"></div>
    <div class="setup_top">
      <van-uploader
         v-model="avatar"
        accept="image"
        style="width:100%"
        :after-read="afterRead"
        @click-upload='beforeRead'
        :preview-image="false"
      >
        <van-cell icon="location-o" title="" is-link value="修改头像" class="cell_title">
          <template #icon>
            <img
              style="width:.6rem;height: .6rem;border-radius: 50%;"
              v-if="avatar_url"
              :src="avatar_url"
              alt=""
            />
            <img
              style="width:.6rem"
              v-else
              src="../../../images/mine/head.png"
              alt=""
            />
          </template>
        </van-cell>
      </van-uploader>

      <van-cell
        title="昵称"
        is-link
        :value="nickName"
        @click="modifyNickName"
        class="cell_title"
      />
      <van-cell title="修改登录密码" is-link value="" @click="goSecure(1)" />
      <van-cell title="修改支付密码" is-link value="" @click="goSecure(2)" />
      <van-cell title="绑定手机号" :value="maskedAccount" />
      <van-cell title="所属区域" :value="location || '-'" @click="getMap"/>
    </div>
    <div class="setup_btn">
      <van-button
        :disabled="loadBtn"
        color="linear-gradient(to right, #FF5851, #E9011B)"
        size="large"
        round
        @click="getLogout"
        >退出登录</van-button
      >
    </div>
    <!-- <div class="setup_version">V1.5.2</div> -->
    <!-- 昵称弹框 -->
    <div>
      <van-popup v-model="nickNameshow" position="center" class="setup-popup">
        <div class="setup-popup_title">填写昵称</div>
        <van-field
        class="field"
          v-model="nicknames"
          placeholder="请填写昵称"
          maxlength="10"
          show-word-limit
          rows="1"
        />
        <div class="setup-popup_btn">
          <van-button round block @click="nickNameCancel">取消</van-button>
          <van-button
            round
            type="info"
            color="linear-gradient(to right, #FF5851, #E9011B)"
            block
            @click="submit"
            >保存</van-button
          >
          <!-- <van-button round  size="normal" @click="submit">取消</van-button>
                    <van-button round color="linear-gradient(to right, #FF5851, #E9011B)" size="normal" @click="submit">保存</van-button> -->
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { LOGOUT, USER_UPDATE, USERDETAIL } from "@/api/mine";
import { getOssParams, uploadImage, uploadDelete } from "@/api/upload";
export default {
  data() {
    return {
      nickNameshow: false,
      nickName: "",
      account: ":",
      avatar_url: "",
      loadBtn: false,
      nicknames: "",
      avatar:[],
      location_status:'',
      location:''
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    this.initData();
  },
  computed: {
    maskedAccount() {
      if (!this.account) return "";
      if (this.account.length !== 11) return this.account; // 如果不是11位，直接返回原值

      return this.account.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    },
  },
  methods: {
    initData() {
      this.$http.get(USERDETAIL).then((res) => {
        this.nickName = res.data.nickname;
        this.nicknames = res.data.nickname;
        this.avatar_url = res.data.avatar_url;
        this.account = res.data.account;
        this.location_status=res.data.location_status
        this.location=res.data.location
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    beforeRead(file){
        this.avatar=[]
    },
    async afterRead(file) {
        // this.avatar=[]
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.avatar);
        // console.log(this.avatar);
        this.getUpdate()

      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 退出登录
    getLogout() {
      this.loadBtn = true;
      this.$http
        .post(LOGOUT)
        .then((res) => {
          this.$toast.success("退出成功");
          localStorage.removeItem("token");
          setTimeout(() => {
            this.loadBtn = false;
            this.$router.replace({
              name: "login",
            });
          }, 1000);
        })
        .catch(() => {
          this.loadBtn = false;
        });
    },
    modifyNickName() {
      this.nickNameshow = true;
    },
    // 修改密码
    goSecure(id) {
      this.$router.push({
        path: "secure",
        query: { filg: id, account: this.account },
      });
    },
    // 取消
    nickNameCancel() {
      this.nicknames = this.nickName;
      this.nickNameshow = false;
    },
    submit() {
      // 保存昵称
      if (this.nicknames == "") {
        this.$toast("请填写昵称");
        return;
      }
      this.avatar=[]
      this.getUpdate();
    },
    getMap(){
        // if(this.location_status==0){
        //     this.$toast("选择区域")
        // }
    },
    getUpdate() {
      let params = {
        nickname: this.nicknames,
        avatar_url: this.avatar.map(item=>item.url)[0],
      };
      this.$http.post(USER_UPDATE, params).then((res) => {
        if (res.code == 200) {
          this.$toast.success("修改成功");
          this.nickNameshow = false;
          this.nickName = this.nicknames;
          this.initData();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;
  background: #f2f4f5;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}
.cell_title{
  .van-cell__value{
    color: #333;

  }

}
.field{
  margin-top: 0.26rem;
 ::v-deep .van-field__value{
    display: flex;
    .van-field__body{
    width: 100%;
  }
  }
}
.empty {
  height: 0.32rem;
}
::v-deep .van-uploader__input-wrapper {
  width: 100%;
}
.setup_top {
  background-color: #fff;
  width: 95%;
  margin: 0 auto;
  padding: 0.2rem;
  box-sizing: border-box;
  border-radius: 0.16rem;
}

.setup_btn {
  width: 80%;
  margin: 0 auto;
  margin-top: 3.8rem;
}

.setup_version {
  text-align: center;
  margin-top: 0.2rem;
  font-size: 0.24rem;
  color: #666;
}

.setup-popup {
  width: 70%;
  background-color: #fff;
  border-radius: 10px;
  padding: .32rem 0;
}

.setup-popup_title {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.44rem;
  text-align: center;
  font-style: normal;
}

.setup-popup_btn {
  display: flex;
  justify-content: space-between;
  padding:0 0.32rem;
  .van-button {
    width: 47%;
    margin-top: 0.58rem;
    padding: .18rem 0;
    font-size: .32rem;
  }
}
</style>
